<template>
  <div>
    <div class="outer">
      <h2>{{ count }}</h2>
      <button @click="add">累加</button>
      <button @click="dec">累减</button>
      <button @click="addName">新增一个人名</button>
      <button @click="destroy">卸载我自己</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      count: 0,
    };
  },
  methods:{
    add(){
      this.count++
      this.$emit('count',this.count)
    },
    dec(){
      this.count--
      this.$emit('count',this.count)
    },
    addName(){
      this.$emit('list',{name:'小王'})
    },
    destroy(){
      this.$destroy()
    }
  },
  beforeDestroy(){
    this.$off()
  }
};
</script>

<style scoped>
.outer {
  height: 200px;
  margin: 30px;
  background: pink;
}
</style>